<template>
    <div class="address">
        <el-row>
            <el-col :span="24">
                <div class="grid-content">
                    <h2>收货地址</h2>
                </div>
                <div class="grid-content">
                    <el-button type="primary" @click="addAddShow">新增</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="12">
            <el-col :span="24">
                <el-card shadow="hover" v-for="item in addrList">
                    <el-row>
                        <el-col :span="22">
                            <div>收货人：{{ item.name }}</div>
                            <div>联系方式：{{ item.phone }}</div>
                            <div>详细地址:{{ item.province + item.city + item.country + item.detail }}</div>
                        </el-col>
                        <el-col :span="2">
                           <div class="an">
                            <el-button type="primary" @click="editShow(item)">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;辑</el-button>
                            <el-button type="warning" @click="deleteAddr(item.id)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
                            <el-button type="success" :disabled="item.selected ==0?false:true" @click="setDeaaultAddr(item.id)">设为默认</el-button>
                           </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <!-- 修改地址的对话框 -->
        <el-dialog title="修改地址" :visible.sync="addressVisible" width="50%" height="auto">
            <el-form :model="form" :rules="rules" ref="addressfrom">
                <el-form-item prop="name" label="收货人" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号" label-width="120px">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" label-width="120px" prop="selectedOptions">
                    <el-cascader size="large" :options="options" v-model="form.selectedOptions" @change="addressChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item prop="detail" label="详细地址" label-width="120px">
                    <el-input v-model="form.detail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addressVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateAddress">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
    components: {},
    data() {
        return {
            addrList: [],
            addressVisible: false,
            options: regionData,							//地区下拉列表
            selectedOptions: [],	//省市区id 
            form: {},
            rules: {
                name: [
                    { required: true, message: '请输入收货人', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                selectedOptions: [
                    { type: 'array', required: true, message: '请选择省市', trigger: 'change    ' }
                ],
                detail: [
                    { required: true, message: '请输入具体地址，如门牌号等', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        //展示修改地址的对话框
        addAddShow() {
            this.addressVisible = true
            this.form = {}
        },
        editShow(item) {
            //打开 编辑地址对话框
            this.addressVisible = true
            this.form = JSON.parse(JSON.stringify(item))
            console.log("当前123", this.from)
            this.request.get("/address/" + item.id).then(res => {
                if (res.code == 200) {
                    let addr = res.data
                    this.form.selectedOptions = [TextToCode[addr.province].code, TextToCode[addr.province][addr.city].code, TextToCode[addr.province][addr.city][addr.country].code]
                    console.log(this.selectedOptions + "123")
                }
            })
        },
        setDeaaultAddr(id){
            //设置默认地址
            this.request.post("/address/setDeaultAddr",id).then( res => {
                if(res.code == 200){
                    this.$message.success("设置默认地址成功")
                    this.getAddressList()
                }
            })
        },
        addressChange(value) {
            //查看级联框数据
            console.log("这时候",this.selectedOptions)
        },
        deleteAddr(id){
            //删除地址
            this.request.delete("/address/"+id).then( res => {
                if(res.code == 200){
                    this.$message.success("删除成功")
                    this.getAddressList()
                }
            })
        },
        addOrUpdateAddress() {//保存地址信息
            this.$refs['addressfrom'].validate((valid) => {
                if (valid) {
           
                    this.form.customerId = JSON.parse(localStorage.getItem("customer")).id
                    
                    this.form.province = CodeToText[this.form.selectedOptions[0]]
                    this.form.city = CodeToText[this.form.selectedOptions[1]]
                    this.form.country = CodeToText[this.form.selectedOptions[2]]
                    
                    console.log("当前111", this.form)
                    this.request.post("/address", this.form).then(res => {
                        if (res.code == 200) {
                            this.$message.success("添加成功")
                            this.getAddressList()
                        }
                    })
                    this.addressVisible = false
                }
            });
            this.getAddressList()
        },
        getAddressList() {//获取用户地址列表
            let id = JSON.parse(localStorage.getItem("customer")).id
            console.log(id)
            this.request.get("/customer/address/" + id).then(res => {
                if (res.code == 200) {
                    this.addrList = res.data
                }
            })
        }
    },

    created() {
        this.getAddressList()
    },
    mounted() {

    },
}
</script>
<style lang="less" scoped>
.address {
    .an .el-button{
        margin: 2px 0px;
    }
    h2 {
        font-size: 22px;
        font-weight: lighter;
        padding-bottom: 20px;
        border-bottom: 1px solid #E6E6E6;

    }

    .el-row {
        .el-card {
            margin: 10px 0px;
        }

    }
}

.el-cascader {
    width: 100%;
}
</style>